今天正式展開 30 天 Vibe Coding 全端開發計畫。主題我決定結合自身經歷：一個「復健日誌與醫病協作平台」。這個應用可以讓病人每天紀錄復健進度，醫師與治療師能即時看到狀況並留言回饋，達到遠端同步與跨角色協作的效果。對我來說不僅是練習開發，更是能切身使用的實際應用。

在這個計畫中，我希望透過「邊做邊學」的方式，把完整的全端開發流程跑過一次。我設定了四大訓練目標：

（1）前端與後端串接，建立清楚的資料流；

（2）雲端部署與持續整合，確保應用能穩定運行；

（3）多人協作設計，理解如何在系統中支持不同角色的權限與互動；

（4）AI 協作開發，善用 Claude Code 的 Vibe Coding 模式，模擬結對程式設計，提升開發效率與程式品質。

30 天後，我希望能完成一個可用的 MVP，並累積實戰經驗，特別是學會如何在 AI 協作下快速完成全端專案，真正把「AI 作為開發夥伴」落實在工作流程中。

📝 1. 專案構想

由於本人三個月前打籃球受傷，前十字韌帶斷裂及半月板破損，其實是非常常見的運動傷害，且目前的醫療進步使用關節鏡手術加速恢復，但手術後需要經歷漫長的復健旅程，這過程中意識到執刀醫生、物理治療師與患者本人，其實需要密切的溝通及更新狀態，才能發揮手術的最大效益，但現代人工作忙碌，醫生每日看診病患眾多，治療師也很難清楚記得每個個案的狀況。
因此萌生想開發一個復健紀錄的工具，適用於可以同步三個角色的溝通，且病人也可以記錄過程，了解自己的蛻變與進步。

這是一個 多角色復健追蹤應用 (Rehab Tracker)。

角色與需求：

• 病人：查看每天的復健課表、打卡紀錄、寫下心得備註
• 復健師：查看病人紀錄，調整課表、留言回饋
• 醫生：記錄手術報告、回診時程、檢視病人整體恢復進度，提供醫囑批註

主要功能：

1. 登入註冊（不同角色）
2. 課表 CRUD（新增、修改、刪除、查看）
3. 打卡（病人每天完成紀錄）
4. 備註 & 留言（雙向互動）
5. 資料視覺化（完成率、趨勢圖）
6. （選擇性）推播提醒（LINE / Discord / Email）

⚙️ 2. 技術選型

• 前端：React + Tailwind（快速做 UI）
• 後端：Node.js + Express
• 資料庫：PostgreSQL
• 部署：
  • 前端 → Render
  • 後端 → Render
  • DB → Supabase (Postgres 雲端服務)
• AI 助手：Claude Code (Vibe Coding)

📂 3. 專案結構 (初版規劃)

參考使用HC的Template
https://www.youtube.com/watch?v=8Q1bRZaHH24&t=9s

project-root/
├── CLAUDE.md              # Essential rules for Claude Code
├── README.md              # Project documentation
├── LICENSE                # Project license
├── .gitignore             # Git ignore patterns
├── src/                   # Source code (NEVER put files in root)
│   ├── main/              # Main application code
│   │   ├── js /    # Language-specific code
│   │   │   ├── core/      # Core business logic
│   │   │   ├── utils/     # Utility functions/classes
│   │   │   ├── models/    # Data models/entities
│   │   │   ├── services/  # Service layer
│   │   │   └── api/       # API endpoints/interfaces
│   │   └── resources/     # Non-code resources
│   │       ├── config/    # Configuration files
│   │       └── assets/    # Static assets
│   └── test/              # Test code
│       ├── unit/          # Unit tests
│       └── integration/   # Integration tests
├── docs/                  # Documentation
├── tools/                 # Development tools and scripts
├── examples/              # Usage examples
└── output/                # Generated output files